{% extends 'base.html' %}

{% block title %}Каталог товаров - МОЙ НЕ САМ{% endblock %}

{% block content %}
<div class="row">
    <!-- Боковая панель с фильтрами -->
    <div class="col-md-3">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Фильтры</h5>
            </div>
            <div class="card-body">
                <form method="get" action="{% url 'catalog' %}">
                    <!-- Поиск -->
                    <div class="mb-3">
                        <label for="search" class="form-label">Поиск</label>
                        <input type="text" class="form-control" id="search" name="q" value="{{ search_query }}">
                    </div>
                    
                    <!-- Категории -->
                    <div class="mb-3">
                        <label for="category" class="form-label">Категория</label>
                        <select class="form-select" id="category" name="category">
                            <option value="">Все категории</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" {% if selected_category == category.id|stringformat:"s" %}selected{% endif %}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- Цена -->
                    <div class="mb-3">
                        <label for="min_price" class="form-label">Минимальная цена</label>
                        <input type="number" class="form-control" id="min_price" name="min_price" value="{{ min_price }}" min="0">
                    </div>
                    
                    <div class="mb-3">
                        <label for="max_price" class="form-label">Максимальная цена</label>
                        <input type="number" class="form-control" id="max_price" name="max_price" value="{{ max_price }}" min="0">
                    </div>
                    
                    <!-- Кнопка применения фильтров -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">Применить фильтры</button>
                        <a href="{% url 'catalog' %}" class="btn btn-outline-secondary">Сбросить фильтры</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Основной контент с товарами -->
    <div class="col-md-9">
        <h2 class="mb-4">Каталог товаров</h2>
        
        {% if products %}
        <div class="row row-cols-1 row-cols-md-3 g-4">
            {% for product in products %}
            <div class="col">
                <div class="card h-100">
                    {% if product.image %}
                    <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 200px; object-fit: cover;">
                    {% else %}
                    <div class="bg-light text-center py-5">
                        <span class="text-muted">Нет изображения</span>
                    </div>
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text text-truncate">{{ product.description }}</p>
                        <p class="card-text"><strong>Цена: {{ product.price }} ₽</strong></p>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <a href="{% url 'product_detail' product.id %}" class="btn btn-primary">Подробнее</a>
                        {% if request.user.is_authenticated %}
                        <a href="{% url 'add_to_cart' product.id %}" class="btn btn-success">В корзину</a>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="alert alert-info">
            Товары не найдены. Попробуйте изменить параметры фильтрации.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}